<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keyword" content="">
    <meta name="description" content="">
    <title>Document</title>
    <style>
        h1 {
            text-align: center;
        }

        p { /*标签选择器 */
            text-align: center;
        }

        .red {
            color: red;
        }

        .size { /* 类选择器 */
            size: 0px;
        }
        /* 一个标签可以有很多个类名 */

        #balabal { /* id选择器 *只能单个标签使用 +*/
            text-align: center;
        }

        * { /* 通配符选择器 *为所有的标签使用该样式 */
            margin: 0px;
            padding: 0px;
            
        }

        /* 复合选择器 */
        ol li {/* 后代选择器 选择父元素下的子元素 可以是class */
            color: pink;
        }

        ol > li { /* 子选择器，选择最近那一代子，子的子不被选择 */
            color: aliceblue;
        }

        ol,
        ul { /* 并集选择器，多个一起改 */
            color: antiquewhite;
        }

        p~span {/* 通用兄弟选择器 选择p中的span之后的相同标签 */
            counter-reset: 2;
        }

        p+span { /* 相邻兄弟选择器 选择一个父类下的紧接着p的下一个span标签  */
            color: pink;
        }

        p:nth-child(i){/* 结构伪类选择器 选择p下面的第i个标签
                            如果第一个和前面的修饰内容对不上则不生效
                             类似的还有first/last-child选择第一/最后一个元素 */
            counter-reset: 2;
        }

        p:nth-of-type(1){/* 结构伪类选择器 选择p下面的第i个p标签  */
            counter-reset: 2;
        }

        element::after {content: attr();} /* 伪元素选择器，权重与标签选择器相等 */

        a[E] {/* 属性选择器 用于选择拥有E属性的a标签 */
            color: aliceblue;
        }

        a:link { /* 伪类选择器 link选择未被访问过的链接 */
            color: green;
            text-decoration: none;
        }

        a:visited { /* 选择已经被访问过的链接 */
            color: purple;
        }

        a:hover {  /* 选择鼠标悬停的链接 */
            color: blue;
        }

        a:active {  /* 选择鼠标按下没有弹起来的链接（选择活动链接） */
            color: blueviolet;
        }
                                        /* 这四个伪类选择器要按顺序写 */
        input:focus { /* 选择有光标的表单元素框 */
            background-color: yellow;
            outline-color: skyblue;
        }

        a {
            text-decoration: none;
            display: block; /* 将行内元素转换为块级元素 inline是行内元素 inline-block行内块元素 */
            cursor: pointer; /*改变指针选中时类型，wait 转圈 pointer 小手 text 文本工字型 default 默认 crosshair 十字状*/
        }
        
        /* 元素显示模式
            块元素 <h1>~<h6> p div ul ol li 等 //独占一行，有宽高 内部可以放行内元素以及块元素
            行内元素 a strong em ins del span 等 //一行多个，无法设置长宽，内部只能放文本或行内元素
            行内块元素 img td input 等 //一行多个，但有间隙 可设置宽高
            vertical-algin: base; // 对齐方式 base基线 bottom底线 top顶线 middie中线
        */

        /* 文字属性 
            font-family: '微软雅黑','宋体'；// 字体 *推荐使用系统默认字体 
                *当有多个字体时，由前向后挨个确认是否有这个字体，如果全没有，按浏览器自带字体显示
            font-size: 16px； //字体大小 默认16px 标题的大小需要特别修改，不能在body标签上修改
            font-weigh: lighter|normal|bold|bolder|700 ; //字体粗细 左边几个由细到粗,
                                                           直接写数字可以控制粗细100-900
            font-style: italic; //斜体
            font: font-style      font-weight    font-size/line-hight（行高） font-family; //一次修改多项
                  可以省略不写    可以省略不写       必须写                       必须写
        */

        /* 文本属性
            color: red/#FF5500/rgb(255,0,0)（rgb(100%,0%,0%)）; //颜色
            text-align: center/left/right; //水平对齐方式
            
            text-decorating: none/underline/overline/line-through //装饰文本 默认 下划线 上划线 删除线
            text-indent: 100px/2em; //首行缩进,em为当前文字的一个字的大小
            line-hight: 26px; //行间距
        */

        /* 背景属性
            background-color: transparend; //无需解释 渐变色属性:  线性渐变linear-gradient(to top,#000,#fff) 径向渐变radial-gradient(#000,#fff)
            background-img: url(地址); //背景图 可放多个图
            background-repeat: repeat|no-repeat|repeat-x|repeat-y; //背景平铺，默认repeat
                    tips: 背景图片默认盖过背景色
            background-position: top|center|bottom|left|center|right; //背景图片位置
                    tips: 方位名字成对出现，如果只有一个，另一个默认center，可写精确坐标 如 20px 50px;
            background-attachment: scroll|fixed; //背景图像固定（背景附着） 随对象滚动|固定
            background: rgba(0,0,0,0.3); //红 绿 蓝 alpha透明度
            background-size: 0px宽 0px高 / contain / cover; //改变背景图的大小 / 图片右边碰壁 / 图片下边碰壁  
            background: 颜色 背景图地址 背景平铺 背景滚动 背景位置
        */

        /* 单行文本隐藏
        
            white-space: nowrap; // 默认 normal 自动换行
            overflow: hidden; // 超出部分隐藏
            text-overflow: ellipsis; // 隐藏使用省略号代替
        
            多行文本隐藏
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        */

        /* list属性
            
        */
                                
        /* 行内样式表（行内式）
            例如<div style="color: red; font-size: 12px;">内容</div>
           内部样式表（嵌入式）
            //将所有css代码放在一个<style>内容</style>中
           外部样式表（链接式）
            将属性代码放入.css文件中再调用  <link rel="stylesheet" href="css路径">
         */

        /* 优先级
                *或者继承 0000
                标签选择器 0001
                类，伪类选择器 0010
                id选择器 0100
                行内选择器 1000
                !important 最大
        */
    </style>
</head>

<body>
    <h1 class="red size" id="balbala">北京欢迎你</h1>
    <a href="#007">测试</a>
    <hr>
    <p>
        迎接另一个晨曦，带来全新空气（陈天佳）<br>
        气息改变情味不变，茶香飘满情谊（刘欢）<br>
        我家大门常打开，开放怀抱等你（那英）<br>
        拥抱过就有了默契，你会爱上这里（孙燕姿）<br>
        不管远近都是客人请不用客气（孙悦）<br>
        相约好了在一起，我们欢迎你（王力宏）
    </p>
    <!--文字样式标签-->
    <strong>加粗了( •̀ ω •́ )y</strong><br><strong>加粗了( •̀ ω •́ )y</strong><br>
    <em>变斜了( •̀ ω •́ )y</em><br>
    <ins>有下划线了( •̀ ω •́ )y</ins><br>
    <del>我被删了( •̀ ω •́ )y</del><br>
    <p>
        巴拉巴拉
        <span>我独立了( •̀ ω •́ )y</span>
        巴拉巴拉
    </p>
    <b>测试文字</b> <!--等于strong-->
    <i>测试文字</i> <!--等于em-->
    <u>测试文字</u> <!--等于ins-->
    <s>测试文字</s> <!--等于del-->
    <!--有序列表-->
    <h2>有序列表</h2>
    <ol type="1"> <!--数字-->
        <li>填写信息</li>
        <li>收电子邮件</li>
        <li>注册成功</li>
    </ol>
    <ol type="A"> <!--大写字母-->
        <li>填写信息</li>
        <li>收电子邮件</li>
        <li>注册成功</li>
    </ol>
    <ol type="I"> <!--阿拉伯-->
        <li>填写信息</li>
        <li>收电子邮件</li>
        <li>注册成功</li>
    </ol>
    <!--无序列表-->
    <h2>无序列表</h2>
    <ul type="circle"> <!--空心圆-->
        <li>填写信息</li>
        <li>收电子邮件</li>
        <li>注册成功</li>
    </ul>
    <ul type="disc"> <!--实心圆-->
        <li>填写信息</li>
        <li>收电子邮件</li>
        <li>注册成功</li>
    </ul>
    <ul type="square"> <!--方块-->
        <li>填写信息</li>
        <li>收电子邮件</li>
        <li>注册成功</li>
    </ul>
    <!-- 定义列表 -->
    <dl type="">
        <dt>这是dt</dt>
        <dd>我是dd</dd>
        <dd>我也是dd</dd>
    </dl>
    <!--
        在文本之间创建四个空格- &emsp;
        在文本之间创建两个空格- &ensp;
        在文本之间创建规则空格- &nbsp;
        创建一个狭窄的空间(类似于常规空间，但略有不同- "&thinsp";
        句子之间的间距- "<br>"
        &gt;大于
        &lt;小于
        &quot; 双引号
        &copy;圈C
    -->
    <!--超链接-->
    <a href="地址 ： 1，外部 tip：https//www.baidu.com 2, 内部 如hello.html " target="打开方法 ： _self 本页面 _blank 新页面"></a>
    <a href="地址 ： 空连接 # 下载链接 如果是一个压缩包或者文件，会下载这个文件"></a>
    <a href="可以给文字，音频，视频，图片添加超链接"><img src="" alt=""></a>
    <a href="作为锚点，在这里填写为#开头的名字"></a>
    <h1 id="名字"></h1>
    <!--特殊字符D:\code\HTML作业\image\HTML特殊字符代码-->
    <!--表格-->
    <table>
        <caption>表格名称</caption>
        <thead><tr><th><!--表头单元格--></th></tr></thead><!--thead表头单元行-->
        <tbody>                                                             <!--tbody表主体-->
            <tr><!--行--><td aria-colspan="2"><!--单元格--></td></tr>
            
            <tr><!--行--><td aria-rowspan="2"><!--单元格--></td></tr>       
            <tr><!--行--><td><!--单元格--></td></tr>    <!--aria-colspan="2"把单元格横向合并并挤出多余单元格-->
            <tr><!--行--><td><!--单元格--></td></tr>    <!--aria-rowspan="2"把单元格纵向合并并挤出多余单元格-->
        </tbody>
    </table>
    <!--表单域-->
    <form action="地址" method="post">  <!-- //安全方式> -->
        <!-- name 是表单元素的名字，同个问题的选项，name必须一样 -->
        用户名<input type="text" name="username" value="框内默认值" placeholder="这里是提示的文字" maxlength="8" id="007">  <!-- 文本 -->
        密码<input type="password" name="password">   <!--隐藏-->
        性别：男<input type="radio" checked="checked"> 女<input type="radio"> 
            <!--radio 单选按钮，其中velue值会被传入后台,name相同为一组-->
        <!-- checked 默认选择 直接checked也可以 =“”不是刚需-->
        爱好：吃饭<input type="checkbox">睡觉<input type="checkbox">打豆豆<input type="checkbox">
                                    <!-- checkbox 复选框 -->
                                    <!-- maxlength 可输入最大长度 -->
        <input type="button" value="获取短信验证码"><!--按钮-->
        <input type="reset" value="这是重置"><!--重置--> <input type="submit" value="这是提交按钮的字"><!--提交-->
        <input type="file"><!--上传文件-->
        <label for="file">啥也不是</label><!--for要与input里面的id一样，达到产生联系的效果-->
        <select name="" id=""><!--下拉表单-->
            <option value="111"></option><!--选项-->
            <option value="" selected=" " >111</option><!--selected 默认选项-->
        </select>
        <textarea name="" id="" 长 cols="30" 宽 rows="10" style="resize: none;"></textarea><!-- 文本域 用于大面积输入内容 -->
        <input type="hidden" name="..." value="...">  <!-- 表单隐藏域，用于提交或者存储一些信息 -->
    </form>
        <!-- 表单type属性.png -->
        <!-- placeholder 提示文本属性 -->
        <!-- 盒子模型 

        margin 外边距
        border 边框 border -width宽度 -style样式solid dashed dotted实线 虚线 点线 -color颜色 -collapse边框重叠 
        padding 内边距
        content 内容
        overflow: hidden; 溢出隐藏
        outline: none; 表单框
        border-radius: 长度; 圆角边框设置方式,长度为边框圆角圆的半径
        box-sizing: border-box; // 盒子最终大小为width : content-box; // 盒子大小为内容大小
        
        -->

    <!-- 
        盒子阴影
        （必选）
        h—shadow 水平阴影
        v—shadow 垂直阴影
        （非必选）
        blur 模糊距离
        spread 阴影尺寸
        color 阴影颜色
        inset 将外部阴影变为内部阴影
        复合方式 box-shadow: h-shadow v-shadow blur spread color inset;
                box-shadow: 10px 10px 10px 10px blue;
     -->
     <!-- 
        文字阴影
        text-shadow: h-shadow v-shadow blur spread;
      -->
    <!-- 
        浮动设置（纵向排列找标准流，横向浮动找浮动）
            tips：浮动元素会脱离标准流，会在一行内显示而且顶部对齐，具有行内块元素的性质
            性质：1，脱离标准控制流的的控制（浮）移动到指定位置（动）。（俗称（脱标））
                 2，浮动的盒子不再保留原先位置
                 3，所有浮动的盒子会顶端对齐，没有缝隙
                 4，块级元素没有设置宽度，默认宽度继承父级，添加浮动后，大小根据内容来决定
                 5，父元素上下排列，子元素浮动排列左右位置，网页布局的第一准则
                 6，对于内容不确定的情况下，不方便直接设置高度，父盒子高度会变成零
                    为了避免这种情况需要对盒子清除浮动
                    方法如下：1，clear: both/left/right;
                            （原理为将浮动的元素闭合到父元素内）

                             2，父级添加overflow: hidden/auto/scrol; 属性，无法显示溢出部分

                             3，父级添加after伪元素
                                复制下面
                                    .clearfix {
                                        content: "";
                                        display: block;
                                        height: 0;
                                        clear: both;
                                        visibility: hidden;
                                    }
                                    .clearfix {
                                        *zoom: 1;
                                    }

                             4，父级添加双伪元素
                                复制下面
                                    .clearfix:before,
                                    .clearfix:after {
                                        content: "";
                                        display: table;
                                    }
                                    .clearfix:after {
                                        clear: both;
                                    }
                                    .clearfix {
                                        *zoom: 1;
                                    }

                             5，额外标签法 ：在父元素下面加入一个块级元素并为其设置 clear: both; 属性 
                                                            
                    tips：<div>列排列
                            <div></div>行排列
                            <div></div>
                         </div>
            float: left/right;
     -->

     <!-- 
        定位
            postion属性 static 文档流 静止不受内外边框影响
                        relative 脱离文档 相对定位 相对于元素正常显示位置定位
                        fixed 文档流 相对于浏览器定位
                        absolute 脱离文档 相对于最近定位父元素，若没有则相对于<html>
                        sticky 脱离文档 粘性定位 在相对可允许的范围内相当于relative，相对不允许的范围内相当于flixe
                                *tips: 经典重叠 “子绝父相”
      -->

    <!-- 字体图标 iconfont 本质属于文字
         图片模糊 filter: blur(5px); 5px越大，模糊程度越高
         计算函数 width: calc(100%-80px); calc对里面的内容进行计算
         过渡 transition: 要过度的的属性 花费时间 运动曲线 何时开始;
    -->

    <div>分区标签</div>
    <header>头部</header>
    <nav>导航</nav>
    <footer>尾部</footer>
    <article>独立的文章</article>
    <section>独立的区域</section>
    <aside>侧边栏</aside>
    
</body>、

<script>
    console.log('啥也不是')
</script>

</html>